<template>
  <Drawer :maskClosable="true" :closable="true" :width="720" v-model:visible="visible" title="应用详情">
    <BasicForm @register="registerForm"></BasicForm>
  </Drawer>
</template>

<script lang="ts" setup>
/* eslint-disable max-lines-per-function */
import { ref } from 'vue';
import { getDetail } from '/@/api/system-mgmt/app-mgmt/app';
import BasicForm from '/@/components/BasicForm/BasicForm.vue';
import { Drawer } from 'ant-design-vue';
import { useBasicForm } from '/@/components/BasicForm/hooks/useBasicForm';
import { detailSchemas } from '/@/views/system-mgmt/app-mgmt/drawer/detailSchema.data';
import { infoSchema } from '/@/views/system-mgmt/app-mgmt/drawer/data';

const props = defineProps(['appId']);

const [registerForm, { updateSchema, setFieldsValue }] = useBasicForm({
  schemas: detailSchemas,
  showActionButtonGroup: false,
  labelWidth: 120,
});

const visible = ref(false);
const appInfo = ref({});

const openDrawer = async () => {
  visible.value = true;
  const res = await getDetail({ id: props.appId });
  appInfo.value = res;
  await updateSchema(infoSchema);
  await setFieldsValue(appInfo.value);
};

const closeDrawer = () => {
  visible.value = false;
};
defineExpose({ openDrawer, closeDrawer });
</script>

<style lang="less" scoped></style>
